<template>
  <section class="content">
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <span>项目:</span>
          <el-select v-model="project12" clearable placeholder="全部" @change="selectKey" class="myInput">
            <el-option v-for="item in project" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <!-- <el-input v-model="input" class="input-w-480" placeholder="请输入内容"></el-input> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24">
      <el-button type="primary" class="button-add" @click="dtuAdd = true">
        <i class="el-icon-edit"></i>添加DTU
      </el-button>
    </el-col>
    <el-col :span="24">
      <el-table :data="tableData" stripe highlight-current-row class="table">
        <el-table-column type="index" width="60"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="transId" label="DTU_ID"></el-table-column>
        <el-table-column prop="mobile" label="电话号码"></el-table-column>
        <el-table-column prop="status" label="连接状态"></el-table-column>
        <el-table-column prop="otherInfo" label="备注"></el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <el-button @click="deleteRow(scope.$index,scope.row)" type="text" size="small">移除</el-button>
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <span class="show-pager">显示总数</span>
        <el-pagination
          @current-change="handleCurrentChange"
          @pre-click="handlePreClick"
          @next-click="handleNextClick"
          :current-page.sync="currentPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="totalRecord"
        ></el-pagination>
      </div>
    </el-col>
    <el-dialog title="添加DTU" :visible.sync="dtuAdd" :modal="false">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="名称：">
          <el-input v-model="form.name" placeholder="请输入名称" class="input-w-480"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="所属项目：">
          <el-select
            v-model="form.projectList"
            clearable
            placeholder="请选择"
            class="input-w-480"
            @change="projectListselectKey"
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="DTU_ID：">
          <el-input v-model="form.transId" placeholder="请输入DTU_ID" class="input-w-480"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="DTU_IP：">
          <el-input v-model="form.transIp" placeholder="请输入DTU_IP" class="input-w-480"></el-input>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="传输设备端口：">
          <el-input v-model="form.transPort" placeholder="请输入传输设备端口" class="input-w-480"></el-input>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="传输类型：">
             <el-input v-model="form.transType" placeholder="dtu" class="input-w-480" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="传输设备类型：">
          <el-select
            v-model="status12"
            clearable
            placeholder="请选择"
            class="input-w-480"
            @change="statusselectKey"
          >
            <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="电话号码：">
          <el-input v-model="form.mobile" placeholder="请输入电话号码" class="input-w-480"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="备注：">
          <el-input
            v-model="form.otherInfo"
            :rows="3"
            type="textarea"
            placeholder="请输入备注"
            class="input-w-480"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class>
        <el-button @click="dtuAdd = false">取消</el-button>
        <el-button type="primary" @click="submitDtuAdd">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑DTU" :visible.sync="dtuEdit" :modal="false">
      <el-form :model="edit">
        <el-form-item :label-width="formLabelWidth" label="名称：">
          <el-input v-model="edit.name" placeholder="请输入名称" class="input-w-480"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="所属项目：">
          <el-select
            v-model="projectlist"
            clearable
            :placeholder="projectList.name"
            class="input-w-480"
            @change="projectListselectKey"
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="DTU_ID：">
          <el-input v-model="edit.transId" placeholder="请输入DTU_ID" class="input-w-480"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="DTU_IP：">
          <el-input v-model="edit.transIp" placeholder="请输入DTU_IP" class="input-w-480"></el-input>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="传输设备端口：">
          <el-input v-model="edit.transPort" placeholder="请输入传输设备端口" class="input-w-480"></el-input>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="传输类型：">
            <el-input v-model="edit.transType" placeholder="请输入传输设备端口" class="input-w-480" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="传输设备类型：" :label-width="formLabelWidth">
          <el-select v-model="statusName" clearable :placeholder="status.name" class="input-w-480">
              <el-option v-for="item in status" :key="item.id" :value="item.name">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="电话号码：">
          <el-input v-model="edit.mobile" placeholder="请输入电话号码" class="input-w-480"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="备注：">
          <el-input
            v-model="edit.otherInfo"
            :rows="3"
            type="textarea"
            :placeholder="edit.otherInfo"
            class="input-w-480"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class>
        <el-button @click="dtuEdit = false">取消</el-button>
        <el-button type="primary" @click="submitDtuEdit">确定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
export default {
  data() {
    return {
      id: "",
      input: "",
      formLabelWidth: "120px",
      dtuAdd: false,
      dtuEdit: false,
      transType: [],
      formoptions: [],
      otherInfo: [],
      tableData: [],
      projectList: [],
      projectlist: [],
      project12:[],
      status12:[],
      statusName:[],
      status: [{id:'1',name: "1" }, {id:'0',name: "0" }],
      otherInfo:{},
      name:'',
      form: {},
      edit: {
          id: ''
      },
      currentPage: 1,
      totalRecord: 0,
      totalPage: 0,
      project: [],
    };
  },
  methods: {
    search() {
      let queryData = {
        projectId: this.project12,
        currentPage: "1",
        pageSize: "10"
      };
      this.dtuModel
        .queryList(queryData)
        .then(res => {
          this.totalRecord = res.data.data.totalRecord;
          this.totalPage = res.data.data.totalPage;
          this.tableData = res.data.data.list;
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    //列表删除
    deleteRow(index, row) {
      this.$confirm("是否要删除?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
       this.tableData.splice(index, 1);
        this.dtuModel.queryDelete(row.id).then(res => {
        }).catch(err => {
            console.log(err.message)
        });
        this.$message({
            type: "succes",
            message: "删除成功!"
        })
      }).catch(() => {
        this.$message({
            type: "info",
            message: "已取消删除"
          });
        })
    },
    //创建DTU
    submitDtuAdd() {
      let data = {
        name: this.form.name,
        projectId: this.form.projectList,
        transId: this.form.transId,
        transIp: this.form.transIp,
        transPort: this.form.transPort,
        transType: "edu",
        //this.form.transType
        status: this.status12,
        mobile: this.form.mobile,
        otherInfo: this.form.otherInfo,
      };
      this.dtuModel
        .deviceTransAdd(data)
        .then(res => {
          if (res.status === 200) {
            this.$message({
              type: "succes",
              message: res.msg
            });
            this.dtuAdd = false;
            this.handleCurrentChange(event);
          } else {
            this.$message({
              type: "info",
              message: res.msg
            });
          }
        })
        .catch(err => {
          console.log(err.message);
        });
    },

    selectKey(id) {
      this.id = id;
      let obj = {};
      obj = this.project.find(item => {
        return item.id === id;
        this.id = obj.id;
      });
    },

    transTypeselectKey(id) {
      this.id = id;
      let obj = {};
      obj = this.transType.find(item => {
        return item.id === id;
        this.id = obj.id;
      });
    },
    statusselectKey(id) {
      this.id = id;
      let obj = {};
      obj = this.status.find(item => {
        return item.id === id;
        this.id = obj.id;
      });
    },
    projectListselectKey(id) {
      this.id = id;
      let obj = {};
      obj = this.projectList.find(item => {
        return item.id === id;
        this.id = obj.id;
      });
    },

    handleEdit(index, row) {
      this.dtuEdit = true;
      this.edit.id = row.id;
      this.edit.name = row.name;
      this.projectlist = row.projectId;
      this.edit.transId = row.transId;
      this.edit.transIp = row.transIp;
      this.edit.transPort = row.transPort;
      this.edit.transType = row.transType;
      this.statusName = row.status;
      this.edit.mobile = row.mobile;
      this.edit.otherInfo = row.otherInfo;
    },
    //编辑DTU
    submitDtuEdit(){
        let data = {
            id: this.edit.id,
            name: this.edit.name,
            projectId: this.projectlist,
            transId: this.edit.transId,
            transIp: this.edit.transIp,
            transPort: this.edit.transPort,
            transType: this.edit.transType,
            status: this.statusName,
            mobile: this.edit.mobile,
            otherInfo: this.edit.otherInfo,
        }
        this.dtuModel.deviceTransUpdate(data).then(res => {
            if(res.status === 200){
                this.$message({
                    type: "succes",
                    message: res.msg
                });
                this.dtuEdit = false;
                this.handleCurrentChange(event);
            }else{
                this.$message({
                    type: "info",
                    message: res.msg
                });
            }
        }).catch(err => {
            console.log(err.message)
        })
    },
    handleCurrentChange(event) {
      let queryData = {
        projectId: this.project12,
        currentPage: this.currentPage,
        pageSize: "10"
      };
      this.dtuModel
        .queryByUser(queryData)
        .then(res => {
          console.log(res.data);
          this.tableData = res.data.list;
        })
        .catch(err => {
          console.log(err.message);
        });
    },
    handlePreClick(event) {
      if (this.currentPage != 1) {
        this.currentPage--;
      }
    },

    handleNextClick(event) {
      if (this.currentPage != this.totalPage) {
        this.currentPage++;
      }
    }
  },
  mounted() {
    let queryData = {
      currentPage: "1",
      pageSize: "10"
    };
    this.dtuModel
      .queryByUser(queryData)
      .then(res => {
        this.totalRecord = res.data.totalRecord;
        this.totalPage = res.data.totalPage;
        this.tableData = res.data.list;
      })
      .catch(err => {
        console.log(err.message);
      });

    this.projectModel
      .projectGetAll()
      .then(res => {
        this.project = res.data;
        this.projectList = res.data;
      })
      .catch(err => {
        console.log(err.message);
      });

      
  }
};
</script>
<style scoped>
.content {
  padding-top: 10px;
  overflow-y: auto;
}
</style>

<style >
.content {
  padding-top: 20px;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.el-dialog {
  width:680px;
}
.breadcrumb {
  height: 27px;
  border-bottom: 1px solid #dfdbdb;
  margin-bottom: 5px;
}
.projectDark {
  margin-top: 40px;
}
</style>
